<template>
	<view>
		<view class="navigation">
			<view class="navigation_back" @tap="backref()">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="navigation_title">
				订单详情
			</view>
		</view>
		<view class="detail_con">
			<view class="order_detail_type">
				<view class="order_status">
					{{orderStatus == 1?'待支付':orderStatus == 2?'待收货':orderStatus==3?'待评价':orderStatus==4?'已完成':'已取消'}}
				</view>
				<view class="order_time">
					{{orderStatus == 1?'请在00:15:00内进行支付，超时将取消':orderStatus == 2?'该订单已成功支付且发货，请收货':orderStatus==3?'该订单已完成，请您帮忙评价一下吧':orderStatus==4?'该订单已完成，再来下一个订单':'该订单已完成，请您帮忙评价一下吧'}}
				</view>
				<view class="order_btns">
					<view class="order_cancel" v-if="orderStatus <= 3">
						取消订单
					</view>
					<view class="order_pay" v-if="orderStatus <= 1">
						进行支付
					</view>
					<view class="order_again" v-if="orderStatus == 2 || orderStatus == 3">
						再来一单
					</view>
					<view class="order_again2" v-if="orderStatus == 4 || orderStatus == 5">
						再来一单
					</view>
				</view>
			</view>
		
			<view class="detail_goods">
				<view class="checkout_con_bd">
					<view class="checkout_store_hd">
						<view class="checkout_store_name">
							{{goodDetail.storeName}}
						</view>
						<view class="checkout_store_phone">
							<image src="../../static/image/shop/mobile.svg" mode=""></image>
						</view>
					</view>
					<view class="checkout_goods">
						<view class="checkout_good" v-for="(item,index) in goodDetail.list" :key="index">
							<view class="checkout_good_img">
								<image :src="item.picUrl" mode="aspectFill"></image>
							</view>
							<view class="checkout_good_info">
								<view class="checkout_good_name">
									{{item.name}}
								</view>
								<view class="checkout_good_type">
									{{item.type}}
								</view>
								<view class="checkout_good_other">
									<view class="checkout_good_price">
										¥{{item.price}}
									</view>
									<view class="checkout_good_num">
										x{{item.num}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="checkout_money">
						<view class="checkout_lunchbox">
							<view class="checkout_money_label">
								餐盒费
							</view>
							<view class="checkout_money_price">
								¥{{ goodDetail.lunchbox }}
							</view>
						</view>
						<view class="checkout_delivery">
							<view class="checkout_money_label">
								配送费
							</view>
							<view class="checkout_money_price">
								¥{{ goodDetail.delivery }}
							</view>
						</view>
					</view>
					<view class="checkout_total_price">
						共{{goodDetail.num}}件,需付<text>¥{{goodDetail.totalPrice}}</text>
					</view>
				</view>
			</view>
		
			<view class="detail_shipping">
				<view class="detail_shipping_title">
					配送信息
				</view>
				<view class="detail_shipping_list">
					<view class="shipping_item">
						<view class="shipping_label">
							配送时间
						</view>
						<view class="shipping_value">
							立即送出
						</view>
					</view>
					<view class="shipping_item">
						<view class="shipping_label">
							配送地址
						</view>
						<view class="shipping_value">
							炎黄联邦学府华夏学院真龙公寓101 19100221133
						</view>
					</view>
					<view class="shipping_item">
						<view class="shipping_label">
							配送服务
						</view>
						<view class="shipping_value">
							配送服务
						</view>
					</view>
				</view>
			</view>
			
			<view class="detail_order">
				<view class="detail_order_title">
					配送信息
				</view>
				<view class="message_list">
					<view class="message_item">
						<view class="message_label">
							订单编号
						</view>
						<view class="message_value">
							DH2012154542254125
						</view>
					</view>
					<view class="message_item">
						<view class="message_label">
							下单时间
						</view>
						<view class="message_value">
							2021.02.05 15:21:55
						</view>
					</view>
					<view class="message_item">
						<view class="message_label">
							备注信息
						</view>
						<view class="message_value">
							多来点辣椒
						</view>
					</view>
					<view class="message_item">
						<view class="message_label">
							餐具
						</view>
						<view class="message_value">
							1份
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderStatus: 1,
				goodDetail: {
					num: 3,
					lunchbox: 1,
					delivery: 1,
					totalPrice: 17,
					storeName: '意大利超火的小面条馆',
					phone: '0934-2555',
					list: [{
							picUrl: require('../../static/image/shop/good_01.jpg'),
							name: '意大利酸汤面',
							type: '中辣/小碗',
							price: 17,
							num: 1
						},
						{
							picUrl: require('../../static/image/shop/good_02.jpg'),
							name: '意大利面',
							type: '中辣/小碗',
							price: 17,
							num: 1
						},
					]
				}
			};
		},
		methods: {
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9FBFC;
	}

	.navigation {
		width: 100%;
		height: 150rpx;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: relative;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #333;
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	.detail_con {
		padding: 0 24rpx 40rpx;

		.order_detail_type {
			padding: 28rpx 0;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;

			.order_status {
				font-size: 32rpx;
				color: #2E343A;
				font-weight: 500;
			}

			.order_time {
				color: #2E343A;
				font-size: 28rpx;
				margin-top: 20rpx;
				font-weight: 500;
			}

			.order_btns {
				display: flex;
				margin-top: 26rpx;

				.order_cancel {
					width: 168rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
					border: 1rpx solid #D8D8D8;
					border-radius: 8rpx;
					color: #2E343A;
					font-size: 26rpx;
				}

				.order_pay {
					width: 168rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 24rpx;
					background-color: #2588FF;
					border-radius: 8rpx;
					color: #FFFFFF;
					font-size: 26rpx;
				}
				.order_again{
					width: 168rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 24rpx;
					background-color: #2588FF;
					border-radius: 8rpx;
					color: #FFFFFF;
					font-size: 26rpx;
				}
				.order_again2{
					width: 168rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
					border: 1rpx solid #D8D8D8;
					border-radius: 8rpx;
					color: #2E343A;
					font-size: 26rpx;
				}
			}
		}
		.detail_goods{
			padding: 0 24rpx;
			background-color: #fff;
			margin-top: 24rpx;
			border-radius: 12rpx;
			.checkout_con_bd{
				padding: 32rpx;
				background-color: #fff;
				border-radius: 12rpx;
				margin-top: 20rpx;
				.checkout_store_hd{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 32rpx;
					border-bottom: 1rpx solid #E8E7E7;
					.checkout_store_name{
						font-size: 30rpx;
						color: #2E343A;
						font-weight: 700;
					}
					.checkout_store_phone{
						image{
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.checkout_goods{
					border-bottom: 1rpx solid #E8E7E7;
					.checkout_good{
						position: relative;
						padding: 24rpx 0;
						display: flex;
						.checkout_good_img{
							image{
								width: 120rpx;
								height: 120rpx;
								border-radius: 12rpx;
							}
						}
						.checkout_good_info{
							padding-top: 15rpx;
							margin-left: 24rpx;
							.checkout_good_name{
								font-size: 28rpx;
								color: #2E343A;
								font-weight: 500;
							}
							.checkout_good_type{
								font-size: 24rpx;
								color: #9098A0;
								margin-top: 8rpx;
							}
							.checkout_good_other{
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								right: 0;
								display: flex;
								flex-direction: column;
								align-items: flex-end;
								.checkout_good_price{
									font-size: 32rpx;
									color: #333333;
									font-weight: 500;
								}
								.checkout_good_num{
									font-size: 24rpx;
									color: #9098A0;
								}
							}
						}
					}
				}
				.checkout_money{
					border-bottom: 1rpx solid #E8E7E7;
					.checkout_lunchbox{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20rpx 0;
					}
					.checkout_delivery{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 20rpx;
					}
					.checkout_money_label{
						font-size: 28rpx;
						color: #9098A0;
						font-weight: 500;
					}
					.checkout_money_price{
						font-size: 28rpx;
						color: #333333;
					}
				}
				.checkout_total_price{
					padding-top: 32rpx;
					text-align: right;
					font-size: 24rpx;
					color: #2E343A;
					text{
						font-size: 32rpx;
						color: #2588FF;
						font-weight: 500;
					}
				}
			}
		}
	
		.detail_shipping{
			padding: 0 24rpx;
			background-color: #fff;
			margin-top: 32rpx;
			border-radius: 12rpx;
			.detail_shipping_title{
				font-size: 32rpx;
				color: #2E343A;
				padding: 32rpx 0;
				border-bottom: 1rpx solid #E8E7E7;
			}
			.detail_shipping_list{
				padding: 16rpx 0;
				.shipping_item{
					padding: 16rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.shipping_label{
						font-size: 28rpx;
						color: #2E343A;
					}
					.shipping_value{
						font-size: 28rpx;
						color: #9098A0;
						width: 50%;
						text-align: right;
					}
				}
			}
		}
		.detail_order{
			padding: 0 24rpx;
			background-color: #fff;
			margin-top: 32rpx;
			border-radius: 12rpx;
			.detail_order_title{
				font-size: 32rpx;
				color: #2E343A;
				padding: 32rpx 0;
				border-bottom: 1rpx solid #E8E7E7;
			}
			.message_list{
				padding: 16rpx 0;
				.message_item{
					padding: 16rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.message_label{
						font-size: 28rpx;
						color: #2E343A;
					}
					.message_value{
						font-size: 28rpx;
						color: #9098A0;
						width: 50%;
						text-align: right;
					}
				}
			}
		}
	}
</style>